<template>
  <tui-list-cell :unlined="unlined" :padding="padding" :arrow="false" :hover="hover" :border-radius="borderRadius" @click="onclick">
    <view class="item flex-row align-center">
      <view class="flex-row margin-right-20 relative">
        <text class="text-30 color-t3">{{ label }}</text>
      </view>
      <view class="value flex-row flex-item align-center justify-end">
        <slot v-if="hasSlot" />
        <template v-else>
          <image v-if="img" :src="img" class="image block" />
          <text v-else class="text-30 color-t1">{{ value || defaultValue }}</text>
        </template>
      </view>
    </view>
  </tui-list-cell>
</template>

<script>
import { viewImage } from '@/common/util'

export default {
  name: 'LDataCell',
  props: {
    value: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: '暂无'
    },
    label: {
      type: String,
      default: ''
    },
    img: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: String,
      default: ''
    },
    unlined: {
      type: Boolean,
      default: true
    },
    hasSlot: {
      type: Boolean,
      default: false
    },
    hover: {
      type: Boolean,
      default: false
    },
    padding: {
      type: String,
      default: '22rpx 28rpx'
    }
  },
  methods: {
    onclick() {
      this.$emit('click')
      if (this.img) {
        viewImage(0, [this.img])
      }
    },
    input(e) {
      this.$emit('input', e.detail.value)
    }
  }
}
</script>

<style scoped lang="scss">
.item,.value{
  min-height:64rpx;
}
.image{
  width:80rpx;
  height:80rpx;
  border-radius:$radius-default;
}
</style>
